<template>
  <el-pagination class="page-box" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="pager.currentPage"
                 :page-sizes="[10, 20, 30, 40, 50]" :page-size="pager.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
  </el-pagination>
</template>

<script>
export default {
  name: 'pagination',
  props: ['pager'],
  data () {
    return {
      pageParam: {
        currentPage: this.pager.currentPage,
        pageSize: this.pager.pageSize
      }
    }
  },
  created () {},
  methods: {
    handleSizeChange (val) {
      this.pageParam.pageSize = val
      this.$emit('refreshPage', this.pageParam)
    },
    handleCurrentChange (val) {
      this.pageParam.currentPage = val
      this.$emit('refreshPage', this.pageParam)
    }
  }
}
</script>

<style>
.page-box {
  margin: 10px auto;
}
</style>
